<template>
	<body-wrap>
		<view class="uul">
			<view class="uli" v-for="(dt,index) in lists || []" :key="dt.id">
				<view class="lkto" @click="goDetails(dt)">
					<view class="liImgBox">
						<image :src="dt.imageUrl" mode="widthFix"></image>
					</view>
					<view class="my-font-family txt">
						<view class="tit">{{dt.title}}</view>
						<view class="con" v-html="dt.content"></view>
					</view>
				</view>
			</view>
			<empty v-if="lists && lists.length==0"/>
			<uni-load-more :status="status" v-if="lists.length>0"/>
		</view>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {getNewsList} from '@/api/index.js'
	import {setStorage} from "@/utils/common.js"
	import empty from "@/components/empty/empty.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			empty
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				pageNumber:1,
				pageSize:5,
				lists:'',
				total:0,
				status:'loading',
				st:'',
				categoryId:''
			})
			
			onPullDownRefresh(()=>{
				clearTimeout(state.st)
				console.log("刷新....")
				state.pageNumber = 1
				state.status = 'loading'
				state.total = 0
				state.lists = ''
				getList()
				state.st = setTimeout(()=>{
					uni.stopPullDownRefresh();
				},1000)
			})
			onReachBottom(()=>{
				console.log("更多....")
				clearTimeout(state.st)
				if(state.status == 'loading'){
					state.pageNumber++
					state.st = setTimeout(()=>{
						getList()
					},1000)
				}
			})
			
			onLoad((options)=>{
				console.log("options:",options)
				if(options && options.ctgid){
					state.categoryId = parseInt(options.ctgid)
				}
				if(options && options.title){
					// 修改标题
					uni.setNavigationBarTitle({
						title:options.title
					})
				}
				getList()
			})
			
			onMounted(()=>{
				getList()
			})
			
			const getList = ()=>{
				let params = {
					pageNumber:state.pageNumber,
					pageSize:state.pageSize,
					publishState:2
				}
				if(state.categoryId){
					params.categoryId = state.categoryId
				}
				getNewsList(params).then(res =>{
					if(res.code !=0) return
					if(state.lists){
						if(state.lists.length>=state.total){
							state.status = 'noMore' // 加载完
						}else{
							state.lists = [...state.lists,...res.data.list]
						}
						
					}else{
						state.lists = res.data.list || []
					}
					state.total = res.data.total
				})
			}
			
			const goDetails = item =>{
				setStorage('newsDetails',JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/news/details/details?id=${item.id}`
				})
			}
			
			return {
				...toRefs(state),
				goDetails
			}
		}
	})
</script>

<style lang="scss" scoped>
	.uul{
		width: 100%;
		background: #fcf7ee;
		padding: 0;
		.uli{
			padding: 36rpx 30rpx;
			background: #fff;
			margin: 0;
			&+.uli{
				margin-top: 20rpx;
			}
			.lkto{
				display: flex;
				.liImgBox{
					width: 350rpx;
					height: 200rpx;
					background: #b9b9b9;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.txt{
					flex: 1;
					padding: 0 0 0 30rpx;
					line-height: normal;
					.tit{
						font-size: 32rpx;
						font-weight: 600;
						text-align: left;
						height: 90rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.con{
						height: 120rpx;
						font-size: 28rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>
